<template>
    <div>

        <van-index-bar :index-list="computedList" @select="change">
          <div  v-for="data in cityList" :key="data.type">

             <van-index-anchor :index="data.type"/>
              <van-cell :title="item.name" v-for="item in data.list" :key="item.cityId" @click="changeCity(item)"/>

          </div>

        </van-index-bar>
    </div>
</template>
<script>
import { Toast } from 'vant'
import Obj from '@/until/obj.js'
import http from '@/until/http.js'
export default {
  mixins: [Obj],
  data () {
    return {
      cityList: []
    }
  },
  computed: {
    computedList () {
      return this.cityList.map(item => item.type)
    }
  },

  mounted () {
    this.$store.commit('hide')
    http({
      url: '/gateway?k=8124531',
      headers: {
        'X-Host': ' mall.film-ticket.city.list'
      }
    }).then(res => {
      this.cityList = this.Filter(res.data.data.cities)
      console.log(this.cityList)
    })
  },
  methods: {
    change (data) {
      Toast(data)
    },
    Filter (index) {
      const cityList = []
      const cityType = []
      for (let i = 65; i < 91; i++) {
        cityType.push(String.fromCharCode(i))
      }
      cityType.forEach(letter => {
        const newList = index.filter(
          (item) => item.pinyin.substring(0, 1).toUpperCase() === letter
        )
        newList.length > 0 && cityList.push(
          {
            type: letter,
            list: newList
          }
        )
      })
      return cityList
    },
    changeCity (item) {
      this.$store.commit('changeName', item.name)
      this.$store.commit('changeId', item.cityId)
      this.$router.back()
    }
  }

}
</script>
<style lang="scss">
 .van-toast--html, .van-toast--text{
  min-width:1.875rem
 }
</style>
